<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
</style>

<div id="vueTest" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>Vue Test <small>Some examples to get you started</small></h3>
            </div>
        </div>
        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-12">

                <h3>This is Vue Test</h3>
                <p>============================</p>
                <h4>数据的单项绑定</h4>
                <p><span>{{title}}</span></p>
                <p><span style="color:red">{{titleErrorMsg}}</span></p>
                <p><span>{{user.age + 1}}</span></p>
                <p><span>{{user.name}}</span></p>


                <p><span style="color:red">{{user.userNameErrorMsg}}</span></p>
                
                <p>
                    <input type="text" v-bind:value="user.name">
                    <input type="text" v-bind:value="user.age">
                </p>

                <p>============================</p>
                <h4>数据双向绑定</h4>
                <p><input type="text" v-model.trim="title"></p>
                <p><input type="text" v-model.trim="user.name"></p>
                <p><input type="text" v-model="user.age"></p>
                <p><input type="text" v-model="user.gender"></p>
                <p><input type="text" v-model="user.loves"></p>
                <p><input type="text" v-model="user.city"></p>

                <p>
                    <p><input type="radio" value="male" v-model="user.gender">男</p>
                    <p><input type="radio" value="female" v-model="user.gender">女</p>
                </p>
               
                <p>
                    <p><input type="checkbox" value="study" v-model="user.loves"></p> 
                    <p><input type="checkbox" value="swiming" v-model="user.loves"></p> 
                    <p><input type="checkbox" value="aaa" v-model="user.loves"></p> 
                    <p><input type="checkbox" value="bbb" v-model="user.loves"></p> 
                </p>

                <p>
                    <select v-model="user.city">
                        <option value="ChengDu">成都</option>
                        <option value="ChongQing">重庆</option>
                        <option value="WuHan">武汉</option>
                        <option value="NanJing">南京</option>
                        <option value="ShangHai">上海</option>
                    </select>
                </p>

                <p>============================</p>
                <h4>条件渲染</h4>
                <p><span v-if="user.age >18 " > 可以去夜店</span></p>
                <p><span v-if="user.gender =='male' " > 喜欢女孩子</span></p>

                <p>============================</p>
                <h4>列表渲染</h4>
                <ul>
                    <li v-for="item in roles" :key="item.id" :value="item.id">{{item.roleName}}</li>
                    <span v-for="(item,index) in roles" >
                        <input type="checkbox":value="item.id" :key="item.id">{{index}}--- {{item.roleName}}
                    </span>
                </ul>
                <p>
                    <select>
                        <option  v-for="item in roles" :value="item.id">{{item.roleName}}</option>
                    </select>
                    </p>
                    <p>
                        <table>
                            <tr><td>Id</td><td>RoleName</td></tr>
                            <tr v-for="item in roles" :key="item.id">
                                <td>{{item.id}}</td>
                                <td>{{item.roleName}}</td>
                            </tr>
                        </table>
                    </p>

                    <p>============================</p>
                    <h4>事件绑定</h4>
                    <p>
                        <input type="button" @click="test1()" value="按钮1">
                        <!-- todo!!! -->
                        <input type="button" @click="test2($event)" value="按钮2" id="btn2" name="aaaaa" mm="haha">
                    </p>

                    <p>============================</p>
                    <h4>监听器</h4>

                    <p>============================</p>
                    <h4>计算器</h4>
                    <!-- 计算器 -->
                    <p><span>{{initUserName}}</span></p>

                    <p>============================</p>
                    <h4>过滤器</h4>
                    <p><span>{{user.name | filter1 | filter2}}</span></p>
            
                    <p>============================</p>
                    <h4>动画和过渡</h4>
                    <input type="button" @click="show = !show" value="ClickMe">
                    <transition name="fade" mode="">
                        <div v-if="show">动画效果</div>
                    </transition>

                    <p>============================</p>
                    <h4>生命周期</h4>
                </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        test1();
    })

    //全局过滤器
    Vue.filter("filter2",function(value){
        return value.replaceAll("a","-");
    });

    //new 一个Vue对象，传一个参数对象，Vue配置对象
    new Vue({
        //元素属性，Vue在页面上的作用范围
        el:"#vueTest",
        //Vue定义的模型数据，页面需要什么定义什么
        data:{
            title:"I love Vue",
            titleErrorMsg:"",
            user:{
                name:"ZhangJizhou",
                userNameErrorMsg:"",
                gender:"male",
                age:20,
                loves:["Studying","BasketBall"],
                city:"ChengDu"
            },
            roles:[
                {id:1,roleName:"admin"},
                {id:2,roleName:"manager"},
                {id:3,roleName:"staff"},
            ],
            show:true
        },
        //该Vue实例拥有的函数,和页面标签绑定，由事件触发
        methods:{
            test1:function(){
                console.log("test1");
            },
            test2:function(event){
                console.log("test2");
                console.log(event.currentTarget.name);
                console.log(event.currentTarget.attributes.getNamedItem("mm").value);
            }
        },
        //监听器
        watch:{
            //一级属性监听
            title:function(oldValue,newValue){
                if(newValue.length > 10){
                    this.titleErrorMsg = "标题太长";
                }
            },
            //多级属性监听
            'user.name':function(oldValue,newValue){
                if(newValue.length > 10){
                    this.user.userNameErrorMsg = "名字太长";
                }
            }
        },
        //计算器
        computed:{
            initUserName:function(){
                if(this.user.name == ""){
                    return "";
                }
                return this.user.name[0].toUpperCase() + this.user.name.substr(1);
            }
        },

        //局部过滤器
        filters:{
             filter1:function(value){
                return value.replaceAll("u","*");
             }
        },
        //生命周期1-----创建Vue实例后就会执行
        created (){
            window.test1=this.test1;
        },
        //生命周期2-----钩子函数-----挂载上后执行
        mounted (){
            //this是当前Vue的实例对象
            this.test1();
        }
    });
</script>

